<template>
  <div class="gover_main">
    <m-header modile-title="透明治理" go-back="true"></m-header>
    <ol>
      <div class="li_list">
        <li>
          <router-link to="/Governance/InCome" replace>
            <div class="div1">
              <span>公有收入</span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="/Governance/Pay" replace>
            <div class="div2">
              <span>共有支出</span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="/Governance/Summary" replace>
            <div class="div3">
              <span>共有汇总</span>
            </div>
          </router-link>
        </li>
      </div>
    </ol>
    <!--显示子路由内容部分-->
    <router-view></router-view>
    <m-footer></m-footer>
  </div>
</template>
<style lang="scss">
  .gover_main {
    width: 100%;
    padding-top: 60px;
    ol {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #d7d7d7;
      list-style: none;
      background: #fff;
      right: 0;
      left: 0;
      position: fixed;
      z-index: 333;
      padding-left: 10%;
      .li_list {
        li {
          width: 30%;
          float: left;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #d7d7d7;
          margin-top: 5px;
          a {
            width: 100%;
            color: #000000;
            font-size: 15px;
            font-weight: bolder;
            text-align: center;
            text-decoration: none;
          }
          a.active {
            font-size: 15px;
            font-weight: bolder;
            div {
              background: #007aff;
              height: 39px;
              span {
                color: #fff;
              }
            }
            .div1 {
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
            }
            .div3 {
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }
          }
        }
        li:first-child {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          border-right: none;
        }
        li:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          border-left: none;
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../components/header'
  import mFooter from '../../../components/Footer'

  export default {
    name: 'Gover',
    data() {
      return {};
    },
    methods: {},
    components: {
      mHeader,
      mFooter
    }
  }
</script>


<style lang="less">

</style>
